
import './Index.css'
import Nav from '../../components/nav/Nav'
import IndexList from '../../components/index-list/Index-List'
import { useNavigate } from 'react-router-dom'
import { delay } from '../../utils/utils'
import { useSelector, useDispatch } from 'react-redux';
function Index () {
 

  const count = useSelector(state => state.chat.login);
  const userList = useSelector(state => state.chat.userList);
  const navigate = useNavigate();
  const toProject = (path) => {
    localStorage.setItem("chatUser",path.chatUser)

    let msg = {
      code: "3",
      type: null,
      receiverId: path.chatUser,
      senderId: localStorage.getItem("WsUid"),
      message: null,
      date: null,
      sendFalg: null
    };
    if (window.socket&&count) {
      window.socket.sendMessage(msg)
    }

    delay(path.path, 0.2, navigate);
  }
  if (!count) {
    delay("/personalchat/", 0, navigate);
  }


  return (
    <div>
      <Nav isindex={true} content={'聊天人群'} />
      <div className='global index-local'>
        {
          Object.keys(userList).map((item, index) => {
            return <div key={item}>
              <div className='index-peppo' onClick={toProject.bind(this, {path:"/personalchat/chat",chatUser:userList[item].account})}>
                <div className='chat-head'>
                  <img className='Fchat-img' src='https://c-ssl.duitang.com/uploads/item/201701/19/20170119215410_WF8VT.jpeg' alt="图片" />
                </div>
                <div className='chat-head1'>
                  <h4>{userList[item].account}</h4>
                  <h6>{userList[item].msg}</h6>
                </div>
              </div>
            </div>
          })
        }

      </div>

    </div >
  );
}

export default Index;